<template>
    <div id="main">
        <div class="bar">
            <div class="left">
                {{ title }}
            </div>
            <div class="right">
                <!-- <el-button type="success" size="mini"  > <i class="el-icon-plus"></i> 添加文章</el-button> -->
            </div>
        </div>
        <div class="table">
                <el-form :model="FormData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="文章分类" prop="pass">
                    <el-select v-model="FormData.fid" placeholder="请选择">
                            <el-option
                            v-for="item in nav"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文章ID" prop="pass" v-if="edit">
                    <el-input  v-model="FormData.id" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文章标题" prop="pass">
                    <el-input  v-model="FormData.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文章作者" prop="checkPass">
                    <el-input  v-model="FormData.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="点击量" prop="age">
                    <el-input type="number" v-model="FormData.click"></el-input>
                </el-form-item>
                <el-form-item label="关键字" prop="age">
                    <el-input v-model="FormData.keyword"></el-input>
                </el-form-item>
                <el-form-item label="学历分类" prop="age">
                    <el-select v-model="FormData.collegeid" placeholder="请选择">
                            <el-option
                            v-for="item in select"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="分类" prop="age">
                    <el-select v-model="FormData.fid" placeholder="请选择">
                            <el-option
                            v-for="item in select"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="文章内容" prop="age">
                    <vue-ueditor-wrap v-model="FormData.content" :config="myConfig"></vue-ueditor-wrap>
                </el-form-item>
                <el-form-item label="状态" prop="age">
                    <el-select v-model="FormData.status" placeholder="请选择">
                            <el-option
                            v-for="item in status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                </el-form-item>
                </el-form>
        </div>

    </div>
</template>

<script>
    import VueUeditorWrap from 'vue-ueditor-wrap'
    export default {
        data() {
            return {
                tableData: [],
                DialogData: {
                    title: "",
                    show: false,
                },
                FormData: {},
                title: "",
                edit: false,
                status: [
                    { value: 1, label: "开启"},
                    { value: 2, label: "关闭"},
                ],
                myConfig: {
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 240,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                    serverUrl: 'http://www.awoojing.club/UEditor/php/controller.php',
                    // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                    UEDITOR_HOME_URL: '/UEditor/'
                },
                select: [],
                nav:[],
            }
        },
        components: {
            VueUeditorWrap
        },
        computed: {
            token() {
                return localStorage.token; 
            }
        },
        created () {
            // console.log(this.$route.params);
            
           let artid = this.$route.params.artid
           if (artid == "add") {
               this.title = "添加文章"
           } else {
               this.title = "编辑文章"
               this.edit = true
                this.getArtical(artid)
           }
        },
        mounted() {
        //    this.getAllxue()
           this.getXueli()
           this.getfid()
        },
        methods: {
            // 获取所有学历
            async getXueli() {
                this.select = []
                let res = await this.$axios.post("/admin/website/xuelist", { token: this.token })
                // console.log(res);
                let arr = []
                if (res.data.data) {
                    arr = res.data.data
                    arr.forEach(el => {
                        this.select.push({
                            value: el.id,
                            label: el.name
                        })
                    });

                }
                
            },
            // get fid
            async getfid() {
               this.nav = []
                let res = await this.$axios.post("/admin/website/optiontoper", { token: this.token })
                // console.log(res);
                
                let code = res.data.code
                if (code == 200) {
                    let arr = res.data.data
                    arr.forEach(el => {
                        this.nav.push({
                            value: el.id,
                            label: el.name
                        })
                    })
                }
            },
            // 根据id获取文章
           async  getArtical( id ) {
               let res = await this.$axios.post("/admin/website/erarticlesingle", { token: this.token, id })
               if (res.data.data) {
                   this.FormData = res.data.data
                   this.FormData.content = this.artformat(this.FormData.content)
               } else {
                   this.FormData = {}
               }
            },
            // guolv
            artformat: function(value) {
                let str = ""
                let reg = /&lt;/g
                let reg1 = /&gt;/g
                let reg2= /&amp;amp;amp;quot;/g
                let reg3 = /&amp;quot;&amp;quot;/g
                let reg4 = /&amp;quot;/g
                str = value.replace(reg,"<").replace(reg1,">").replace(reg2,"").replace(reg3, '').replace(reg4, "")
                return str
            },

            checkData() {
                let { articleid, title, content, status,author, click, keyword, collegeid } = this.FormData
                if (articleid == "undefined") {
                    this.$message.error("请选择文章所属类目")
                    return false
                } else if(!title) {
                    this.$message.error("请输入文章标题")
                    return false
                } else if(!content) {
                    this.$message.error("请输入文章内容")
                    return false
                } else if(!author) {
                    this.$message.error("请输入文章作者")
                    return false
                } else if(!status) {
                    this.$message.error("请输入文章初始状态")
                    return false
                } else if(!click) {
                    this.$message.error("请输入文章初始点击量")
                    return false
                } else if(!keyword) {
                    this.$message.error("请输入文章关键词")
                    return false
                } else if(!collegeid) {
                    this.$message.error("请选择所属学历")
                    return false
                } else {
                    return true
                }
            },
            //提交表单
           async submitForm() {
               let isReady = this.checkData()
               if (isReady) {
                   this.FormData.token = this.token
                   let res = await this.$axios.post("/admin/website/erarticle", this.FormData)
                //    console.log(res);
                   let code = res.data.code
                   if (code == 202 || code == 204) {
                       this.$message.success("更新成功")
                       this.$router.push("/secondart")
                   } else {
                       this.$message.success("更新失败")
                       this.$router.push("/secondart")
                   }
                   
               }
           },
        },
    }
</script>

<style lang="scss" scoped>
 #main {
     width: 100%;
     box-sizing: border-box;
     .bar {
         width: 100%;
         font-weight: bold;
         display: flex;
         justify-content: space-between;
         height: 40px;
         line-height: 40px;
         border-bottom: 1px solid #aaa;
     }
     .table {
         margin-top: 20px;
     }
     .pic {
         width: 40px;
         height: 40px;
         display: block;
     }
 }
</style>